import { defineComponent, reactive } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Search from "@/components/Search";
import FilterMenu from "@/components/FilterMenu";
import ListView from "@/components/ListView";
import RowView from "@/components/RowView";
import ButtonView from "@/components/ButtonView";
import LabelGroup from "@/components/LabelGroup";
import { ILabelProps } from "@/components/Label/types";
import ColView from "@/components/ColView";
import { Divider } from "vant";
import { getSize, getUserInfoUrl, phoneClick } from "@/command/apiTool";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ExpertCell from "@/components/ExpertCell";
import FilterMenuSearch from "@/components/FilterMenuSearch";
export default defineComponent({
  name: "",
  setup() {
    const data: IFilterMenuChoose[] = [
      // { type: "area", key: "areas" },
      { type: "field", key: "areas" },
      // { type: "datePicker", key: "time" },
    ];
    const form = reactive({});
    const render1 = () => {
      return (
        <div>
          <FilterMenuSearch choose={data} searchKey="name" v-model={form} />
        </div>
      );
    };
    const render2 = () => {
      return (
        // <ListView  renderItem={renderItem} class="mx-[15px] box-border" />
        <ListView
          {...getUserInfoUrl(
            {
              dh: "/api/H5/skill/expert/listData",
              xh: "/api/H5/skill/expert/listData",
            },
            form
          )}
          type="page"
          itemHeight={100}
          renderItem={renderItem}
          themeStyle="list-view-p-20"
        />
      );
    };
    const renderItem = (e: any) => {
      const labels: ILabelProps[] = [
        {
          name: "专家",
          type: "blue",
        },
        {
          name: "种植",
          type: "green",
        },
      ];
      return (
        <ExpertCell
          labels={labels}
          src={
            e.logoUrl
              ? e.logoUrl
              : "https://img0.baidu.com/it/u=381455857,3136195082&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680109200&t=bc5b19560fa127a5a3b95782edc78e68"
          }
          desc={e.areasName}
          phone={e.phone}
          address={e.serviceStation}
          title={e.userName}
        />
      );
    };
    return () => {
      return (
        <PageTitle title="专家列表" bgColor="white" childClass="!p-[0px]">
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
